---
---
<!DOCTYPE html>
<html lang=en>

<head>
    <meta charset=utf-8>

    <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/common/css/stylesheet.css"/>
    <link rel="stylesheet" href="{{ site.baseurl }}/common/css/stylesheet-fonts.css" type="text/css" charset="utf-8">
    <link rel="icon" href="{{ site.baseurl }}/common/css/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="{{ site.baseurl }}/common/css/favicon.ico" type="image/x-icon">
    <title>Magento Community Edition (CE) 1.9 and Magento Enterprise Edition (EE) 1.14 Responsive Web Design Developer's Guide</title>

</head>

<body>
<a name="top"></a>

<img src="{{ site.baseurl }}/common/images/m1x/m1xheader.png" width="1024" alt="header" />

<!-- Title: Magento Community Edition (CE) 1.9 and Magento Enterprise Edition (EE) 1.14 Responsive Web Design Developer's Guide-->
<!-- URL: ee114-ce19-rwd-dev-guide -->

<body>
<a name="top"></a>

<div id="content">

<h1>Magento Community Edition (CE) 1.9 and Magento Enterprise Edition (EE) 1.14 Responsive Web Design Developer's Guide</h1>
<p><em>by <a href="https://www.classyllama.com/team/erik-hansen">Erik Hansen</a></em></p>
<p><a href="{{ site.m1xgithuburl }}guides/m1x/ce19-ee114/RWD_dev-guide.html" target="_blank">Edit this page on GitHub <img src="{{ site.baseurl }}/common/images/github_icon.png" height="15px"></a></p>


<div class="toc"><h4 class="toc">Contents</h4>
<ul><li><a href="#intro">Introduction</a></li>
<li><a href="#support">Supported Devices and Browsers</a></li>
<li><a href="#changes">Understanding the Changes in the Responsive Theme</a></li>
<li><a href="#compass-install">Installing Compass and Sass</a></li>
<li><a href="#disable-cache">Disabling the Magento Cache</a></li>
<li><a href="#theme">Copying Files to Create Your Custom Theme</a></li>
<li><a href="#customizing-theme">Responsive Theme Reference</a></li>
<li><a href="#remove-sample-content">Removing Sample Data Assets</a></li>
<li><a href="#advanced">Advanced Topics</a></li>
<li><a href="#help">Getting Help With Your Theme</a></li>

</ul></div>

<h2 id="intro">Introduction</h2>
<p>Magento Enterprise Edition 1.14 and Magento Community Edition 1.9 come with a new theme named <tt>rwd</tt> that implements <a href="http://en.wikipedia.org/wiki/Responsive_web_design" target="_blank">Responsive Web Design (RWD) practices</a>. This guide discusses what you need to know when customizing your own responsive theme.</p>
<p>Magento CE's and EE's responsive theme uses a number of new technologies:</p>
<ul><li><a href="http://compass-style.org/" target="_blank">Sass/Compass</a>: A CSS pre-compiler that provides organizable, reusable CSS.</li>
<li><a href="http://jquery.com/" target="_blank">jQuery</a>: Used for all custom JavaScript in the responsive theme. jQuery operates in <tt>noConflict()</tt> mode so it doesn't conflict with Magento's existing JavaScript library. </li>
<li>Additional JavaScript libraries discussed in more detail in <a href="#customize-theme-js">Working With JavaScript</a>.</li></ul>
<p>If you're not familiar with Sass or Compass, you should familiarize yourself with them before continuing with this guide.</p>
<ul>
    <li>Sass
        <ul>
            <li><a href="http://sass-lang.com/guide" target="_blank">Quick-Start Guide</a></li>
            <li><a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html" target="_blank">Full Documentation</a></li>
        </ul>
    </li>
    <li><a href="http://compass-style.org/" target="_blank">Compass</a></li>
</ul>
<p>The new responsive theme code is contained in the following directories (relative to your Magento installation directory):</p>
<ul><li><tt>app/design/frontend/rwd</tt></li>
<li><tt>skin/frontend/rwd</tt></li></ul>
</ul>
<p>See one of the following sections for more information:</p>
<ul><li><a href="#intro-audience">Intended Audience</a></li>
<li><a href="#intro-assumptions">Documentation Assumptions and Conventions</a></li>
<li><a href="#intro-exceptions">Exceptions to Responsive Web Design</a></li></ul>

<h3 id="intro-audience">Intended Audience</h3>
<p>This guide assumes that you have a good understanding of Magento front end development and Responsive Web Design techniques.</p>

<h3 id="intro-assumptions">Documentation Conventions and Assumptions</h3>
<p>This section discusses some basic information that applies to this guide.</p>

<h4 id="intro-convention">Documentation Conventions</h4>
<p>This guide uses the names <tt>custompackage</tt>和<tt>customtheme</tt> for the design package and theme. When you build your own responsive theme, use a more descriptive name, such as the name of your company.</p>
<p>The variable value <tt>[your Magento install dir]</tt> refers to the directory in which you installed Magento CE or EE. Typical values follow:</p>
<ul><li>Ubuntu: <tt>/var/www/magento</tt></li>
<li>CentOS: <tt>/var/www/html/magento</tt></li></ul>

<h4 id="intro-assumption">Assumption: How You Customize CSS</h4>
<p>You have two choices to write your custom CSS styles:</p>
<ul><li>Write CSS in the Sass stylesheets using the same structure that the Magento responsive theme uses. This approach requires setting up a Compass compiler, but is <em>strongly</em> recommended. This guide assumes you'll use this approach.</li>
<li>Directly modify the CSS files that ship with the responsive theme and ignore the Sass files. While this approach might be simpler in the short run, the CSS files in the responsive theme were output by the Sass compiler and are therefore not conducive to being customized directly. This approach is <em>not</em> recommended.</li></ul>

<h3 id="intro-exceptions">Exceptions to Responsive Web Design</h3>
<p>Responsive design was <em>not</em> implemented for the following:</p>
<ul><li>Multiple address checkout</li>
<li>Popular search terms page</li>
<li>Popular search terms cloud</li>
<li>Site map</li>
<li>My Account&mdash;Billing Agreements</li>
<li>My Account&mdash;Recurring Profiles</li>
<li>E-mail templates</li>
<li>Tags</li>
<li>Polls</li>
<li>Captcha</li>
<li>The gift registry <em>(EE only)</em></li>
<li>Multiple wishlists <em>(EE only)</em></li>
<li>Place order by SKU <em>(EE only)</em></li></ul>
<div class="msg-box important"><img src="{{ site.baseurl }}/common/images/m1x/icon-note.png" alt="note" align="left" width="40"><span><strong>注意</strong>: Magento still supports other non-responsive themes as well. You don't need to use this guide to customize those themes. For more information, see the <a href="http://info.magento.com/rs/magentocommerce/images/MagentoDesignGuide.pdf" target="_blank">Designer's Guide to Magento</a>.</div>


<h2 id="support">Supported Devices and Browsers</h2>
<p>Magento's responsive theme was developed with full support for the following devices and browsers:</p>
<ul>
    <li>Windows:
	<ul><li>IE9 and later</li>
    <li>Latest stable version of Chrome</li>
    <li>Latest stable version of Firefox</li></ul>
	</li>
	<li>OS X:
    <ul><li>Latest stable version of Chrome</li>
    <li>Latest stable version of Firefox</li>
	<li>Latest stable version of Safari</li></ul>
    </li>
    <li>iOs (iPhone and iPad): Safari on iOs 7</li>
    <li>Android: Chrome browser on Android 4.0+ (also known as Ice Cream Sandwich)</li>
</ul>
<p>Basic compatibility should be expected on Android 2.3+ (and other mobile devices) and IE8, but full support is not guaranteed.</p>

<h2 id="changes">Understanding the Changes in the Responsive Theme</h2>
<p>The new responsive theme in EE 1.14 and CE 1.9 is based on the existing <tt>base/default</tt> theme. The new responsive theme has about 130 template files that have been modified to better handle the needs of responsive development. Following are some of the changes that have been made in these template files:</p>
<ul>
    <li>Rearranged elements to work better with smaller viewports.</li>
    <li>Changed the <tt>Doctype</tt> to <tt>html</tt> to enable use of HTML5 elements. (To avoid large amounts of template modifications, HTML5 tags were implemented only when necessary.)</li>
    <li>Refactored attributes of <tt>&lt;input></tt> elements to HTML5 standards.</li>
    <li>Refactored product lists to show varying number of products per column.</li>
    <li>Removed all <tt>&lt;fieldset></tt> elements because they don't work well in a responsive context.</li>
</ul>

<h3 id="changes-layout">Changes to Layout Files</h3>
<p>A number of the core layout files (<tt>catalog.xml</tt>, <tt>customer.xml</tt>) were slightly modified to account for responsive changes. There are only a few notable changes to the layout files:</p>
<ul>
    <li><tt><a href="#intro-convention">[your Magento install dir]</a>/app/design/frontend/rwd/default/layout/page.xml</tt> was modified to include all of the new responsive assets.</li>
    <li>Because two and three column layouts collapse to a single column on smaller viewports, all content in the <tt>left</tt> block are displayed under the main content. This is a problem because blocks&mdash;like the navigation on all My Account pages&mdash;must display above the main content on smaller viewports. To address this, a new <tt>left_first</tt> block was added that looks like the left column on larger viewports, but on smaller viewports, it displays above the main content.</li>
</ul>

<h3 id="changes-ee">Using the New Theme/Layout Structure&mdash;<em>Magento EE only</em></h3>
<p>If you've worked with a previous version of Magento EE, you're aware that the <tt>enterprise/default</tt> theme contains copies of <em>many</em> of the layout and template files from <tt>base/default</tt>&mdash;some with very minor changes. This is not an optimal approach because as it results in duplicated content.</p>
<p>The Magento EE responsive theme's <tt>rwd/enterprise</tt> directory includes only template and layout files that contain Magento EE-only features.</p>
<p>Instead of copying layout files as the <tt>enterprise/default</tt> theme does, <tt>rwd/enterprise</tt> isolates changes in their own layout files in <tt>[your Magento install dir]app/design/frontend/rwd/enterprise/layout/enterprise</tt></p>
<p>The <tt>rwd/enterprise</tt> theme replaces the <tt>enterprise/default</tt> theme and contains <em>far</em> fewer files than its predecessor (156 compared to 280). This new approach makes it easier for you to see what functionality is unique to Magento EE.</p>

<h3 id="changes-fallback">Changes to Magento Theme Fallback</h3>
<p>Magento CE 1.9 and EE 1.14 both introduce a theme configuration file named <tt>theme.xml</tt>. This file allows theme developers to specify a parent theme which results in a more predictable and useful fallback than earlier versions.</p>
<p>For more information, see <a href="http://alanstorm.com/magento_parent_child_themes" target="_blank">Alan Storm's Parent/Child Theme article</a>.</p>

<h2 id="compass-install">Installing Compass and Sass</h2>
<p>Sass is a powerful CSS pre-compiler that extends CSS supports variables, mixins, and placeholders. Compass is a library for Sass that adds hundreds of useful mixins and functions to Sass&mdash;everything from color blending to sprite generation.</p>
<p>Because the new Magento responsive theme uses the Compass library to compile its Sass files into CSS, you must install Compass in your development environment in any of the following ways:</p>
<ul>
    <li><a href="http://compass-style.org/install" target="_blank">Command line</a></li>
    <li>Using any of the following third-party applications:
        <ul>
            <li><a href="https://github.com/scout-app/scout-app" target="_blank">Scout</a></li>
            <li><a href="http://compass.kkbox.com" target="_blank">Compass App</a></li>
            <li><a href="https://incident57.com/codekit" target="_blank">CodeKit</a></li>
        </ul>
    </li>
    <li>Compile using your code editor (PHPStorm, Sublime, and so on): Many code editors run Compass from the editor so that you don't have to use the command line to re-compile when you make changes. However, you must install Compass using the command line.</li>
</ul>

<!-- <p>To learn more about how to configure your development environment to compile with Compass, read this Configure a Compass Compiler for Magento RWD Theme guide.</p>
 -->
<h2 id="disable-cache">Disabling the Magento Cache</h2>
<p>A good practice during development on Magento is to disable Magento's cache. Although doing this adversely impacts performance, it frees you from having to manually clear the cache when you make changes to files or configuration settings that are being cached.</p>
<p>You should always enable the cache in a production environment.</p>
<p>To disable the cache:</p>
<ol>
<li>Log in to the Magento Admin Panel as an administrator.</li>
<li>Click <strong>System</strong> > <strong>Configuration</strong> > <strong>Cache Management</strong>.</li>
<li>On the Cache Management page, click <strong>Select All</strong>.<br />
<strong>注意</strong>: The <strong>Page Cache</strong> option at the bottom of the list is available only in Magento EE.</li>
<li>From the <strong>Actions</strong> list in the upper right corner of the page, click <strong>Disable</strong>.</li>
<li>Click <strong>Submit</strong>.<br />
The following figure shows an example.<br />
<img src="{{ site.baseurl }}/common/images/m1x/disable-cache.png" width="600px" height="173px"></li>
<li>Click <strong>Submit</strong>.<br />
<p>The following figures shows all cache types disabled.<br />
<img src="{{ site.baseurl }}/common/images/m1x/disable-cache-confirm.png" width="600px" height="173px"></li>
</li></ol>

<h2 id="theme">Copying Files to Create Your Custom Theme</h2>
<p>This section discusses how to start building a custom responsive theme. </p>
<p>See one of the following sections for more information:</p>
<ul><li><a href="#theme-structure">步骤1. Creating a Directory Structure for Your Responsive Theme</a></li>
<li><a href="#theme-copyfiles">步骤2. Copying Files For Your Theme</a></li>
<li><a href="#theme-compass">步骤3. Configuring a Compass Watcher</a></li>
<li><a href="#theme-admin">步骤4. Configuring Magento to Load Your Theme</a></li>
<li><a href="#theme-verify">步骤5. Verifying Your Custom Theme</a></li>
<li><a href="#theme-admin-trouble">故障排除 Theme Configuration</a></li></ul>

<h3 id="theme-structure">步骤1. Creating a Directory Structure for Your Responsive Theme</h3>
<p>You'll do your responsive theme development using a copy of the responsive theme provided with Magento CE and EE. This section discusses how to create new top-level directories for your theme and to copy files to those directories.</p>
<p>The <tt>rwd/default</tt> theme falls back directly to the <tt>base/default</tt> theme, so themes in the <tt>default</tt> package will never be included as a part of the fallback chain.</p>
<div class="msg-box important"><img src="{{ site.baseurl }}/common/images/m1x/icon-note.png" alt="note" align="left" width="40"><span><strong>注意</strong>: <em>Magento EE only.</em> The <tt>enterprise/default</tt> theme is completely replaced by <tt>rwd/enterprise</tt> and therefore, <tt>enterprise/default</tt> is not included as a part of the fallback chain.</div>

<!-- <p>Magento CE 1.9 and Magento EE 1.14 have a new theme fallback structure that provides infinite levels of fallback. Learn more about this fallback structure in the <a href="#" style="color: red;">Magento Infinite Theme Fallback Structure</a> article.</p>
 -->
<p>The top-level directories you'll need are:</p>
<ul><li><tt>[your Magento install dir]/app/design/frontend/custompackage/customtheme</tt></li>
<li><tt>[your Magento install dir]/skin/frontend/custompackage/customtheme</tt></li></ul>
<p>To create those directories and to add your theme configuration:</p>
<ol><li>Using a command shell, log in to your Magento host as a user with privileges to write to the web server docroot. (Typically, this is the web server user.)</li>
<li>Enter the following commands in the order shown:
<pre>cd <a href="#intro-convention">[your Magento install dir]</a>
mkdir -p app/design/frontend/custompackage/customtheme
mkdir -p skin/frontend/custompackage/customtheme</pre></li>
<li>Create another directory for your theme configuration and change to that directory:
<pre>mkdir app/design/frontend/custompackage/customtheme/etc
cd app/design/frontend/custompackage/customtheme/etc</pre></li>
<li>Use <tt>vim</tt> or another text editor to create your theme configuration file named <tt>theme.xml</tt> there:
<pre>vim theme.xml</pre></li>
<li id="themexml"><tt>theme.xml</tt> must have different contents for Magento CE or Magento EE:
<ul><li>Magento CE:
<script src="https://gist.github.com/xcomSteveJohnson/10934766.js"></script></li>
<li>Magento EE:
<script src="https://gist.github.com/xcomSteveJohnson/10937099.js"></script></li>
<div class="msg-box important"><img src="{{ site.baseurl }}/common/images/m1x/icon-important.png" alt="important" align="left" width="40"><span><strong>Important</strong>: It's very important you have a <tt>theme.xml</tt> in the <tt>app/design/frontend/custompackage/customtheme/etc</tt> directory with exactly the contents shown. Failure to configure <tt>theme.xml</tt> correctly prevents Magento from loading your theme.</span></div>

</ul>
</li></ol>

<h3 id="theme-copyfiles">步骤2. Copying Files For Your Theme</h3>
<p>Use the following commands to copy files for your custom theme:</p>
<pre>cd <a href="#intro-convention">[your Magento install dir]</a>
cp -R skin/frontend/rwd/default/images skin/frontend/custompackage/customtheme
cp -R skin/frontend/rwd/default/scss skin/frontend/custompackage/customtheme
<!-- cp skin/frontend/rwd/default/scss/config.rb skin/frontend/custompackage/customtheme --></pre></li>
<p>Copying the <tt>images</tt> directory is important because the CSS uses relative image paths. To avoid duplicating Sass files, review the information discussed in <a href="#sass-fallback-structure">Sass Fallback Structure</a>.</p>
<p>The following figure shows how your custom theme directory structure looks after copying these files and directories.</p>
<img src="{{ site.baseurl }}/common/images/m1x/custom_skin-dir.png">

<h3 id="theme-compass">步骤3. Configuring a Compass Watcher</h3>
<p>You can configure Compass to watch your skin directories for changes to CSS and JavaScript and to compile them when something changes.</p>
<p>You can do this in either of the following ways:</p>
<ul><li><em>(Recommended)</em> Using your PHP IDE. 例如， if you use PHP Storm, see <a href="http://www.jetbrains.com/phpstorm/webhelp/working-with-sass-and-scss-in-compass-projects.html" target="_blank">Working with SASS and SCSS in Compass Projects</a>和<a href="http://www.jetbrains.com/phpstorm/webhelp/using-file-watchers.html" target="_blank">Using File Watchers</a>.</li>
<li>Using following commands:
<pre>cd <a href="#intro-convention">[your Magento install dir]</a><em>/custom-theme-dir</em>/scss 
compass watch .</pre>
    例如， if Magento is installed in <tt>/var/www/html/magento</tt>, enter:
    <pre>cd /var/www/html/magento/skin/frontend/custompackage/customtheme/scss
compass watch .</pre></li></ul>
<p>For more information, see <a href="http://compass-style.org/help/documentation/command-line/" target="_blank">Compass Command Line Documentation</a>.</p>

<h4 id="theme-compass-success">Success Messages</h4>
    <p>Messages similar to the following display to indicate the command completed successfully:</p>
    <pre>>>> Change detected at 09:57:12 to: madisonisland-ie8.scss
   create ./../css/madisonisland-ie8.css
   create ./../css/styles.css
   create ./../css/madisonisland.css
   create ./../css/styles-ie8.css
   create ./../css/scaffold-forms.css
>>> Compass is polling for changes. Press Ctrl-C to Stop.
</pre>

<h4 id="theme-compass-fail">Failure Message</h4>
<p>If the following message displays, it likely indicates that <tt>config.rb</tt> is not in the correct location:</p>
<pre>Nothing to compile. If you're trying to start a new project, you have left off the directory argument.</pre>
<p>Enter the following commands to verify you have <tt>config.rb</tt> in the correct location:</p>
<pre>cd <a href="#intro-convention">[your Magento install dir]</a>
ls skin/frontend/custompackage/customtheme/scss</pre>
<p>If there is no <tt>config.rb</tt> in that location, enter the following command:</p>
<pre>cp skin/frontend/rwd/default/scss/config.rb skin/frontend/custompackage/customtheme/scss</pre>
<p>Compass requires a <tt>config.rb</tt> file located in the directory from which you run this command. The sample provided with Magento CE and EE follows:</p>
<script src="https://gist.github.com/xcomSteveJohnson/11048374.js"></script>
<p>After correcting the issue, try the <tt>compass watch</tt> commands discussed in <a href="#theme-compass">步骤3. Configuring a Compass Watcher</a>.</p>

<h3 id="theme-admin">步骤4. Configuring Magento to Load Your Theme</h3>
<p>This section discusses how to configure Magento to load your new theme.</p>
<ol><li>Log in to the Magento Admin Panel as an administrator.</li>
<li>Click <strong>System</strong> > <strong>Configuration</strong> > GENERAL > <strong>Design</strong>.</li>
<li>In the right pane, click <strong>Package</strong> to expand it.</li>
<li>In the <strong>Current Package Name</strong> field, enter <tt>custompackage</tt></li>
<li>In the right pane, expand <strong>主题</strong>.</li>
<li>In the <strong>Default</strong> field, enter <tt>customtheme</tt><br />
The following figure shows an example.<br />
<img src="{{ site.baseurl }}/common/images/m1x/admin-panel-custom-theme.png" width="600px" height="481px"></li>
<li>In the top right corner of the page, click <strong>Save Config</strong>.<br />
If an error displays when you attempt to save the configuration, see <a href="#theme-admin-trouble">故障排除 Theme Configuration</a>.</li>
<li>If prompted, flush the cache:
<ol><li>Click <strong>System</strong> > <strong>Configuration</strong> > <strong>Cache Management</strong>.</li>
<li>At the top of the page, click <strong>Flush Magento Cache</strong>.</li></ol>
</li>
</ol>

<h3 id="theme-verify">步骤5. Verifying Your Custom Theme</h3>
<p>To verify that Magento loads your theme:</p>
<ol><li>Navigate to your web store in a web browser.</li>
<li>View the web page source.</li>
<li>If you see a reference to <tt>/skin/frontend/custompackage/customtheme/css/styles.css</tt>, you are ready to begin building your new theme.</li></ol>
<div class="msg-box important"><img src="{{ site.baseurl }}/common/images/m1x/icon-note.png" alt="note" align="left" width="40"><span><strong>注意</strong>: If your theme fails to load properly, see the next section.</div>

 
<h3 id="theme-admin-trouble">故障排除 Theme Configuration</h3>
<p>See one of the following sections for troubleshooting assistance:</p>
<ul><li><a href="#theme-admin-trouble-table">General 故障排除</a></li>
<li><a href="#theme-admin-trouble-files">Directory and File Reference</a></li></ul>

<h4 id="theme-admin-trouble-table">General 故障排除</h4>
<p>The following sections assist you in determining the cause of errors you might experience after setting up your custom theme.</p>

<h5>No formatting on the web store</h5>
<p><em>描述</em>: Most likely an issue with <tt>theme.xml</tt>. You can confirm this by viewing the page source and searching for <tt>styles.css</tt>. If <tt>styles.css</tt> is loading from a path similar to the following, <tt>theme.xml</tt> is most likely not loading.</p>
<pre>http://www.example.com/magento/skin/frontend/base/default/css/styles.css</pre>
<p><em>Solution</em>: 输入下面的命令：</p>
<pre>cat <a href="#intro-convention">[your Magento install dir]</a>/app/design/frontend/custompackage/customtheme/etc/theme.xml</pre>
<p>If the error <tt>No such file or directory</tt> displays, check your directory paths and create <tt>theme.xml</tt> as discussed in <a href="#theme-copyfiles">步骤2. Copying Files For Your Theme</a>.</p>
<p>If you have a <tt>theme.xml</tt>, check to make sure it's configured <em>exactly</em> as shown <a href="#themexml">here</a>.</p>

<h5>Error saving the custom package and theme in the Admin Panel</h5>
<p><em>Symptom</em>: The following error displays:</p>
<pre>An error occurred while saving this configuration: package with this name does not exist and cannot be set.</pre>
<p><em>描述</em>: The package and theme names you entered in the Admin Panel must be directories in a specific location on the file system. These directories don't exist. (See the figure in <a href="#theme-admin-trouble-files">Directory and File Reference</a>.) Check the path and spelling.</p>
<p><em>Solution</em>: Repeat the tasks discussed in <a href="#theme-structure">步骤1. Creating a Directory Structure for Your Responsive Theme</a>.</p>

<h5>Wrong formatting in the web store</h5>
<p><em>Symptom</em>: 例如:</p>
  <ul><li>No images display</li>
  <li>Only a list of categories displays on the left side of the page, with images after the text</li></ul>
<p><em>描述</em>: There is a different <tt>theme.xml</tt> for CE and EE. You might have used an EE <tt>theme.xml</tt> with CE or vice versa.</p>
  <p>You can verify this using a web browser inspector:</p>
  <ul><li><tt>styles.css</tt> loads from the correct directory</tt>
  <li>Some HTTP 403 (Forbidden) errors loading images</li>
  <li>Some HTTP 404 (Not Found) errors loading images from <tt>skin/frontend/base/default/images/media</tt> (which doesn't exist)</li></ul>
<p><em>Solution</em>: Review the information discussed in <a href="#theme-copyfiles">步骤2. Copying Files For Your Theme</a>.</p>
<p>Make sure <tt>theme.xml</tt> for CE or EE is configured <em>exactly</em> as shown <a href="#themexml">here</a>.</p>

<h4 id="theme-admin-trouble-files">Directory and File Reference</h4>
<p>The following figure shows the directory structure in a properly configured system, as well as the location of <tt>theme.xml</tt>, the custom theme configuration file.</p>
<img src="{{ site.baseurl }}/common/images/m1x/custom-theme-dir-structure_image.png">

<h2 id="customizing-theme">Responsive Theme Reference</h2>
<p>This section discusses information you need to customize the responsive theme you started in <a href="#theme">Copying Files to Create Your Custom Theme</a>.</p>
<p>See one of the following sections for more information:</p>
<ul><li><a href="#customizing-theme-prelim">Basic Recommendations for Development</a></li>
<li><a href="#customizing-theme-sass-struct">Understanding the Sass Structure</a></li>
<li><a href="#customze-theme-sass-partials">Adding Your Own Sass Partials</a></li>
<li><a href="#customize-theme-break">Using Media Query Breakpoints</a></li>
<li><a href="#customize-theme-images">Working With Images</a></li>
<li><a href="#customize-theme-js">Working With JavaScript</a></li>
</ul>

<h3 id="customizing-theme-prelim">Basic Recommendations for Development</h3>
<p>We recommend you do the following things when you start developing your responsive theme:</p>
<ul><li>Edit <tt>[your Magento install dir]/skin/frontend/custompackage/customtheme/scss/config.rb</tt> to change <tt>environment = &#58;production</tt> to <tt>environment = &#58;development</tt>.<br />
For more information about this setting, see <a href="http://compass-style.org/help/documentation/configuration-reference//" target="_blank">Compass Configuration Reference</a>.</li>
<li>Disable the Magento cache as discussed in <a href="#disable-cache">Disabling Magento's Cache</a>.</li></ul>

<h3 id="customizing-theme-sass-struct">Understanding the Sass Structure</h3>
<p>In previous versions of Magento, all CSS styles were grouped into a massive <tt>styles.css</tt> file that was cumbersome and difficult to navigate. The CSS in the responsive theme is organized into individual files referred to as <em>Sass partials</em>.</p>
<p>When Compass compiles the Sass partials, the output is a set of CSS files that are loaded by the browser: <tt>styles-ie8.css</tt> is for IE8 and earlier, and <tt>styles.css</tt> is for all other browsers.</p>
<p>Following is the directory structure of the <tt>skin/frontend/custompackage/customtheme</tt> directory.</p>
<div class="msg-box important"><img src="{{ site.baseurl }}/common/images/m1x/icon-note.png" alt="note" align="left" width="40"><span><strong>注意</strong>: This structure does not include the sample data assets that you will <a href="#remove-sample-content">remove later in this guide</a>.</div>

<p><pre>
&#x251C;&#x2500;&#x2500; css
&#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; scaffold-forms.css
&#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; styles-ie8.css
&#x2502;&nbsp;&nbsp; &#x2514;&#x2500;&#x2500; styles.css
&#x251C;&#x2500;&#x2500; images
&#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; ajax-loader.gif
&#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; bg_x.png
&#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; demo-logo.png
&#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; demo_logo.png
&#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; icon_sprite.png
&#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; icon_sprite@2x.png
&#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; logo.png
&#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; logo_small.png
&#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; opc-ajax-loader.gif
&#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; social_icons.png
&#x2502;&nbsp;&nbsp; &#x2514;&#x2500;&#x2500; social_icons@2x.png
&#x2514;&#x2500;&#x2500; scss
    &#x251C;&#x2500;&#x2500; _core.scss
    &#x251C;&#x2500;&#x2500; _framework.scss
    &#x251C;&#x2500;&#x2500; _var.scss
    &#x251C;&#x2500;&#x2500; config.rb
    &#x251C;&#x2500;&#x2500; content
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _category.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _home.scss
    &#x251C;&#x2500;&#x2500; core
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _common.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _form.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _reset.scss
    &#x2502;&nbsp;&nbsp; &#x2514;&#x2500;&#x2500; _table.scss
    &#x251C;&#x2500;&#x2500; function
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _black.scss
    &#x2502;&nbsp;&nbsp; &#x2514;&#x2500;&#x2500; _white.scss
    &#x251C;&#x2500;&#x2500; layout
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _footer.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _global.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _header-account.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _header-cart.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _header-nav.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _header-search.scss
    &#x2502;&nbsp;&nbsp; &#x2514;&#x2500;&#x2500; _header.scss
    &#x251C;&#x2500;&#x2500; mixin
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _breakpoint.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _clearfix.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _if-resolution.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _image-replacement.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _loading-overlay.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _menu.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _not-selectable.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _toggle-content.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _triangle.scss
    &#x2502;&nbsp;&nbsp; &#x2514;&#x2500;&#x2500; _typography.scss
    &#x251C;&#x2500;&#x2500; module
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _account-reviews.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _catalog-compare.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _catalog-msrp.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _catalog-product.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _checkout-cart-minicart.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _checkout-cart.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _checkout-onepage.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _checkout-success.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _cms.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _configurableswatches.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _contacts.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _cookies.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _customer.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _paypal.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _pricing_conditions.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _product-list.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _review.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _search.scss
    &#x2502;&nbsp;&nbsp; &#x251C;&#x2500;&#x2500; _slideshow.scss
    &#x2502;&nbsp;&nbsp; &#x2514;&#x2500;&#x2500; _wishlist.scss
    &#x251C;&#x2500;&#x2500; override
    &#x2502;&nbsp;&nbsp; &#x2514;&#x2500;&#x2500; _plugin.scss
    &#x251C;&#x2500;&#x2500; scaffold-forms.scss
    &#x251C;&#x2500;&#x2500; styles-ie8.scss
    &#x251C;&#x2500;&#x2500; styles.scss
    &#x2514;&#x2500;&#x2500; vendor
        &#x2514;&#x2500;&#x2500; _normalize.scss
</pre></p>

<p>This is an explanation of the files in the preceding list:</p>
<ul>
   <li><tt>config.rb</tt>: Configuration values that tell Compass to look in the <tt>scss</tt> directory for Sass files and to export the CSS to the <tt>css</tt> directory. It also includes information about how Compass should format the compiled CSS.</li>
   <li><tt>scss/styles.scss</tt>: Wrapper that imports the <tt>framework.scss</tt>和<tt>core.scss</tt> files.</li>
   <li><tt>scss/styles-ie8.scss</tt>: Identical to <tt>styles.css</tt> file, except it does not include any media queries because IE8 and earlier don't support media queries. For more information, see <a href="#breakpoint-ie8">Using the bp() mixin for older IEBrowser Versions</a>.</li>

   <li><tt>scss/_framework.scss</tt>: Imports all of the libraries, variables, functions, and mixins used by the other stylesheets. The files imported by <tt>framework.scss</tt> do not output any CSS on their own. Because of that, this file can be imported by other Sass files that are intended to compile directly to CSS files.<br />
   例如， in Magento EE, the <tt>skin/frontend/rwd/enterprise/scss/enterprise.scss</tt> file imports <tt>skin/frontend/rwd/default/scss/_framework.scss</tt> so the Magento EE partials can use the common variables, mixins, and so on imported by <tt>framework.scss</tt>.</p>
        <ul>
           <li><tt>scss/_var.scss</tt>: Contains variables like breakpoints, spacing, colors, and font styles that are used by the other Sass partials. You should expect to modify this file heavily as you customize your responsive theme.</li>
           <li><tt>scss/mixins/</tt>: This directory contains all of the mixins used by the responsive theme. You should familiarize yourself with these mixins because they are useful for writing your custom styles.</li>
           <li><tt>scss/function/</tt>: This directory contains functions that the responsive theme uses. Functions are mixins that return simple values.</li>
        </ul>
    </li>
   <li><tt>scss/_core.scss</tt>: Imports all of the Sass partials that output CSS content:</p>
        <ul>
           <li><tt>scss/core/</tt>: Partials that contain all of the global styles. Expect to heavily customize the partials in this directory.</li>
           <li><tt>scss/layout/</tt>: Partials that define the structural layout of the responsive theme (header, content, and footer). The <tt>scss/core/_common.scss</tt> partial also contains some layout styles&mdash;specifically the one, two, or three column layouts.</li>
           <li><tt>scss/module/</tt>: Partials that contain styles grouped by module. While the correlation between these module files and Magento core modules is close, it is not a 1:1 relationship. 例如， the <tt>_product-list.scss</tt> file contains styles for both the <tt>Mage_Catalog</tt>和<tt>Mage_CatalogSearch</tt> modules.</li>
           <li><tt>scss/vendor/</tt>: This directory is intended for third-party CSS libraries like the <tt>_normalize.scss</tt> partial that normalizes how browsers render elements.</li>
        </ul>
    </li>
   <li><tt>scss/scaffold-forms.scss</tt>: For more information, see <a href="#scaffold-forms">Scaffold Forms</a>.</li>
</ul>

<h3 id="customze-theme-sass-partials">Adding Your Own Sass Partials</h3>
<p>To customize styles for an existing Magento theme, you should edit existing Sass partials. However, if you are building a highly custom theme, you will likely want to create new partial files to contain styles for new functionality that you are introducing. Here is how to do that:</p>
<ol>
    <li>Add your partials to a new file named <tt>skin/frontend/custompackage/customtheme/scss/module/<em>_new-module.scss</em></tt>.</li>
	<li>Create a new <tt>skin/frontend/custompackage/customtheme/scss/_custom_core.scss</tt> file with the following line to import your new partial:
    <pre>@import &quot;module/<em>new-module</em>&quot;;</pre>
	<strong>注意</strong>: Although you could edit <tt>core.scss</tt> to import your new partials, you should create <tt>_custom_core.scss</tt> to clearly distinguish which partial files are custom versus native.</li>
    <li>Add this line to the bottom of <tt>styles.scss</tt>和<tt>styles-ie8.scss</tt> files:
    <pre>@import &quot;custom_core&quot;;</pre></li></ol>
    <p>The contents of your new Sass partial will now be included in the output CSS files.</p>

<h3 id="customize-theme-break">Using Media Query Breakpoints</h3>
<p>The responsive theme has a set of <a href="http://breakpoint-sass.com" target="_blank">breakpoints</a> it uses consistently (except for a few one-off breakpoints). These breakpoints are defined in both <tt>_var.scss</tt>和<tt>app.js</tt> so the CSS and JavaScript functionality stay in sync:</p>
<pre>$bp-xsmall: 479px;
$bp-small: 599px;
$bp-medium: 770px;
$bp-large: 979px;
$bp-xlarge: 1199px;</pre>
<p>A custom <tt>bp()</tt> mixin includes media query breakpoints. </p>
<p>例如， this Sass:</p>
<script src="https://gist.github.com/xcomSteveJohnson/11231041.js"></script>
<p>generates this CSS:</p>
<script src="https://gist.github.com/xcomSteveJohnson/11231104.js"></script>
<p>The breakpoint variables are intended to be used with <tt>max-width</tt> by default. When you use the breakpoint with <tt>min-width</tt>, you should add a pixel <tt>($bp-medium+1)</tt> so the <tt>min-width</tt>和<tt>max-width</tt> styles don't both get applied to the same viewport size.</p>

<h4 id="breakpoint-ie8">Using the bp() mixin for older IEBrowser Versions</h4>
It is important to use the <tt>bp()</tt> mixin for your media query breakpoints because IE8 and earlier do not support media queries. While you can use a polyfill like <a href="https://github.com/scottjehl/Respond" target="_blank">respond.js</a> to add media query support to IE versions 6&ndash;8, doing so will impact performance. Additionally, using a polyfill doesn't add much value because nearly all IE 6&ndash;8 users view web pages on a large screen device (1024px or larger), so those users won't benefit from media queries anyway.</p>
<p>To address the fact that IE 6&ndash;8 doesn't support media queries, the <tt>styles-ie8.scss</tt> stylesheet defines a couple of variables:</p>
<pre>$mq-support: false;
$mq-fixed-value: 1024px;</pre>
<p>With those variables defined, the <tt>bp()</tt> mixin outputs only the styles that would be visible on a 1024px+ viewport <em>and</em> it does not wrap those styles in a media query so that the IE browsers always render those styles. Refer to <a href="#customizing-theme-sass-struct"><tt>_breakpoint.scss</tt></a> to see exactly how this is done.</p>
<p>While it is acceptable to use the breakpoint variables defined by the responsive theme, when building your own responsive theme, your breakpoints should be specifically tailored to the content of your site. 例如， let's say your main navigation only has four links and it fits nicely in a horizontal layout on viewports larger than 400px.</p>
<p>The responsive theme changes the horizontal layout to a collapsed drop-down on viewports smaller than 771px. Rather than defaulting to how the theme collapses the navigation, you should change the navigation to break at about 400px so users on screens between 400px and 771px get to experience the benefit of viewing the horizontal navigation.</p>

<h3 id="customize-theme-images">Working With Images</h3>
<p>There are very few images in the responsive theme compared to the other Magento themes because CSS3 is used whenever possible to accomplish a visual effect.</p>

<h4 id="customize-theme-images-logo">Working With the Header Logo</h4>
<p>The responsive theme enables you to specify two different logos: one optimized for small screens (narrower than 770px) and the other for large screens. Place your two logo files in <tt>skin/frontend/custompackage/customtheme/images</tt> and specify the path to both logos in the Magento Admin Panel:</p>

<ol><li>Log in to the Magento Admin Panel as an administrator.</li>
    <li>Click <strong>System</strong> > <strong>Configuration</strong> > GENERAL > <strong>Design</strong>.</li>
    <li>In the right pane, click <strong>Header</strong> to expand it.</li>
    <li>In the <strong>Logo Image Src</strong> field, enter the path of your primary logo. 例如: <tt>images/logo.png</tt>.</li>
    <li>In the <strong>Small Logo Image Src</strong> field, enter the path of your logo for small viewports. 例如: <tt>images/logo_small.png</tt>.</li>
    <li>In the top right corner of the page, click <strong>Save Config</strong>.</li>
    <li>If prompted, flush the cache:
        <ol><li>Click <strong>System</strong> > <strong>Configuration</strong> > <strong>Cache Management</strong>.</li>
            <li>At the top of the page, click <strong>Flush Magento Cache</strong>.</li></ol>
    </li>
</ol>

<h4 id="customize-theme-images-sprites">Working With Sprites</h4>
<p>The responsive theme uses two sprites: one for general icons and the other for social icons.</p>
<p>Both sprite images output at 1x and 2x resolutions (for high-resolution screens). Because sprite files are very difficult to edit without the source files, you should use these Photoshop files to change these sprites: <a href="{{ site.baseurl }}/common/images/m1x/RWD_icon_sprite.psd">RWD_icon_sprite.psd</a>和<a href="{{ site.baseurl }}/common/images/m1x/RWD_social_icons.psd">RWD_social_icons.psd</a>
<p>Compass provides support</a> for generating sprites from individual image files, but it was not used to generate sprites for the responsive theme. However, you might want to take advantage of that feature for your custom theme. Using this method requires knowledge of Compass.</p>

<h3 id="customize-theme-js">Working With JavaScript</h3>
<p>All of the custom JavaScript in the responsive theme is contained in <tt>skin/frontend/rwd/default/js/app.js</tt>. To customize the responsive theme's JavaScript, copy <tt>app.js</tt> to <tt>skin/frontend/custompackage/customtheme/js</tt> and edit it there.</p>
<p>All custom JavaScript is based on jQuery (v1.10.2). In addition to jQuery, the following JavaScript libraries are included in the responsive theme:</p>
<ul>
    <li><a href="http://wicky.nillia.ms/enquire.js" title="Enquire.js Documentation" target="_blank">enquire.js</a>: Used to run JavaScript conditionally, based on viewport size.</li>
    <li><a href="https://github.com/desandro/imagesloaded" title="imagesloaded.js Github" target="_blank">imagesloaded.js</a>: Used to determine whether images are fully loaded on the product detail page before activating zoom.</li>
    <li><a href="http://jquery.malsup.com/cycle2/" title="Cycle2 Documentation" target="_blank">jquery.cycle2.min.js</a>: Powers the rotating banners on the homepage (requires Magento's sample data). This library can be removed if you aren't using the sample data. If you want to implement slide shows, <a href="http://www.owlgraphic.com/owlcarousel" target="_blank">Owl Carousel</a> is recommended over Cycle2, as it has true swipe support and has more options.</li>
    <li><tt>jquery.cycle2.swipe.min.js</tt>: Adds pseudo-swipe support to Cycle2.</li>
    <li><a href="http://jquery.com/" target="_blank">jquery-1.10.2.min.js</a>: jQuery library</li>
    <li><a href="https://github.com/paulirish/matchMedia.js" title="matchMedia.js Github" target="_blank">matchMedia.js and matchMedia.addListener.js</a>: Used by <tt>enquire.js</tt> to provide support for IE9.</li>
    <li><a href="http://modernizr.com/" target="_blank">modernizr.custom.min.js</a>: Adds classes to the <tt>&lt;html&gt;</tt> tag to indicate whether browser supports certain CSS3 features and whether device is touch-enabled. The <tt>.touch</tt>和<tt>.no-touch</tt> classes are used in the Sass partials. They provide a <tt>Modernizr.mq</tt> function to test a media query in a cross-browser manner.</li>
    <li><a href="http://selectivizr.com/" target="_blank">selectivizr.js</a>: Adds support for CSS3 selectors in IE 6&#8211;8</li>
    <li><a href="http://www.elevateweb.co.uk/image-zoom" target="_blank">elevatezoom/jquery.elevateZoom-3.0.8.min.js</a>: Powers image zoom on product detail pages.</li>
</ul>

<h2 id="remove-sample-content">Removing Sample Data Assets</h2>
<p>The responsive theme includes several assets that are intended to power Magento's sample data. We recommend you remove them before you build your custom theme.</p>
<ol>
    <li>Remove the following files and directories:
        <pre>skin/frontend/custompackage/customtheme/images/media
skin/frontend/custompackage/customtheme/scss/madisonisland.scss
skin/frontend/custompackage/customtheme/scss/madisonisland-ie8.scss
skin/frontend/custompackage/customtheme/scss/content/_category.scss
skin/frontend/custompackage/customtheme/scss/content/_home.scss
skin/frontend/custompackage/customtheme/css/madisonisland.css
skin/frontend/custompackage/customtheme/css/madisonisland-ie8.css</pre></li>
<li>In your custom layout file (for example, <tt>app/design/frontend/custompackage/customtheme/layout/local.xml</tt>), add this XML:<br />
<script src="https://gist.github.com/xcomSteveJohnson/11273347.js"></script>
The preceding XML:
<ul><li>Removes the Madison Island CSS files</li>
<li>Removes the Raleway font that is used as a part of the default theme</li>
<li>Removes the jQuery Cycle plugin and the <tt>slideshow.js</tt> file that activates Cycle.</li></ul>
    </li>
<li>Update this line in <tt>skin/frontend/custompackage/customtheme/scss/_var.scss</tt> to reference whatever font you want to use for your custom site font:
        <pre>$f-stack-special: 'Raleway', 'Helvetica Neue', Verdana, Arial, sans-serif;</pre> 
        <p>If you want to use a custom web font for your theme (such as a <a href="https://www.google.com/fonts" target="_blank">Google Font</a>, add XML like this to the <tt>&lt;reference name=&quot;head&quot;&gt;</tt> section of <tt>layout.xml</tt> (see 步骤3). Customize the <tt>&lt;href></tt> value to the value that your custom web font provider gives you. It is recommended to include the same font weights that are referenced below (300,400,500,700,600) because the responsive theme uses each of those font weights.</p>
        <script src="https://gist.github.com/xcomSteveJohnson/1081640af28ab619f259.js"></script>
    </li>
</ol>

<h2 id="advanced">Advanced Topics</h2>

<p>After you get familiar with the new structure, we encourage you to read these topics to fully take advantage of responsive web design.</p>

<h3 id="prepare-for-production">Getting Your Theme Ready for Production</h3>

<p>To prepare your responsive theme for production, you should update <tt>config.rb</tt> in your theme directory to use these values:
<pre>output_style = &#58;compressed
environment = &#58;production</pre>
</p>

<p>After you do this, you should recompile all of your Sass files&mdash;you can do this on the command line by running these commands inside your theme directory: <tt>compass clean</tt> and then <tt>compass compile</tt>. Finally, deploy the compiled CSS to your production system.</p>

<h3 id="sass-fallback-structure">Sass Fallback Structure</h3>
<p>We recommend copying all of the Sass files from <tt>skin/frontend/rwd/default/scss</tt> to <tt>skin/frontend/custompackage/customtheme/scss</tt> to make it easy to get started with custom theme development. The downside of this approach is that it results in duplicating many files that you never edit directly.</p>
<p>In the end, your custom theme must include all Sass partials you want to override. There are at least two ways to do this:</p>
<ul><li>If you followed the setup instructions in <a href="#theme-structure">步骤1. Creating a Directory Structure for Your Responsive Theme</a>, you must delete some files from your custom theme.<br />
Delete the following directories to remove all the Sass partials that you copied from <tt>rwd/default</tt>:<br />
<pre>skin/frontend/custompackage/customtheme/scss/core/
skin/frontend/custompackage/customtheme/scss/function/
skin/frontend/custompackage/customtheme/scss/layout/
skin/frontend/custompackage/customtheme/scss/mixin/
skin/frontend/custompackage/customtheme/scss/module/
skin/frontend/custompackage/customtheme/scss/override/
skin/frontend/custompackage/customtheme/scss/vendor/</pre>
The following files should now be located in <tt>skin/frontend/custompackage/customtheme/scss</tt>:<br />
<pre>_var.scss
_core.scss
styles-ie8.scss
styles.scss
scaffold-forms.scss
_custom_core.scss
_framework.scss</pre></li>
<li>If you're familiar with Magento theme development and you did <em>not</em> already copy Sass partials, copy <em>only</em> the Sass partials you want to override from <tt>rwd/default</tt> to <tt>skin/frontend/custompackage/customtheme/scss</tt>.</li></ul>
<p>Now you can set up a fallback structure:</p>
<ol>
    <li>Add the following line to <tt>skin/frontend/rwd/default/config.rb</tt> (omit the first line if you're using CE):
        <pre>add_import_path &quot;../../../rwd/enterprise/scss&quot;
add_import_path &quot;../../../rwd/default/scss&quot;</pre>
The preceding causes Compass to look for Sass files in <tt>skin/frontend/rwd/enterprise/scss</tt> first and then in <tt>skin/frontend/rwd/default/scss</tt> if they can't be found in <tt>skin/frontend/custompackage/customtheme/scss</tt>.</li>
<li>Following is what to do with copies of Sass files from <tt>rwd/default</tt>:<br />
        <ul>
            <li><tt>styles.scss</tt>, <tt>styles-ie8.scss</tt>: You must copy these files into your custom theme so that Compass knows which files to compile into CSS files.</li>
            <li><tt>_core.scss</tt>, <tt>framework.scss</tt>: You must copy these files into your custom theme so Compass looks in the <tt>custompackage/customtheme</tt> directory for any of the files imported by these two files.</li>
            <li><tt>_var.scss</tt>: You'll typically edit the values in this file for your custom theme.<br />
			If you don't like the idea of editing this file and want to override its values with a <tt>_var_custom.scss</tt> file, make sure it gets imported immediately after <tt>_var.scss</tt>.</li>
        </ul>
    </li>

    <li>As a reminder, to override Sass partials in <tt>rwd/default</tt>, you must copy them into your custom theme so they'll get included by Compass.<br />
	<strong>注意</strong>: If you're using <tt>compass watch</tt> to recompile your Sass, you must stop and restart Compass any time you copy a new Sass file into your custom theme. Otherwise, the Compass compiler won't know about the existence of the new file.<br />
    To avoid having to stop and restart <tt>compass watch</tt>, start your project by copying all Sass files from <tt>rwd/default</tt> into your custom theme, and then delete all unchanged Sass files at the end of your project.</li>
</ol>

<h3 id="scaffold-forms">Scaffold Forms</h3>
<p>The Magento responsive theme ships with <tt>skin/frontend/rwd/default/scss/scaffold-forms.scss</tt> that has styles that cause the labels of long forms (for example, the Billing Information step of checkout) to display to the left of their associated input on larger viewports (as opposed to on top). This layout is intended to make long forms seem less intimidating to users.</p>
<p>However, these styles are not currently implemented because the Magento responsive theme must work well with internationalization (where the length of labels can vary greatly, thereby impacting the scaffold form layout).</p>
<p>It's up to you whether or not to use these styles. To do so, move <tt>skin/frontend/rwd/default/scss/scaffold-forms.scss</tt> to <tt>core/_scaffold-forms.scss</tt> and edit <tt>scss/_core.scss</tt> to include it.</p>

<h3>High-Definition Images</h3>
<p>The responsive theme has no high-resolution image solution for product listing pages. Refer to <a href="https://speakerdeck.com/brendanfalkowski/responsive-ecommerce-part-two#114" target="_blank">slides starting at 114</a> of Brendan Falkowski's Imagine 2013 talk for implementation suggestions. For a 2x solution, PictureFill (or similar polyfill) could be used, although it would need to be integrated with ElevateZoom.</p>
<div class="msg-box important"><img src="{{ site.baseurl }}/common/images/m1x/icon-note.png" alt="note" align="left" width="40"><span><strong>注意</strong>: Category banners and product detail pages use a 1.5x image solution.</div>

<p>Magento does not resize the main product photo on product detail pages, so you must implement high-resolution support in your responsive theme. You must be careful with this if you have very large product photos because it could drastically impact performance.</p>
<p>To constrain the size of your main product photo, open <tt>app/design/frontend/rwd/default/template/catalog/product/view/media.phtml</tt> and modify this line:
<pre>&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($_product, 'image') ?&gt;</pre>
to something like:
<pre>src=&quot;&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($_product, 'image')-&gt;constrainOnly(true)-&gt;resize(1800); ?&gt;&quot;</pre>

<h2 id="help">Getting Help With Your Theme</h2>
<p>If you encounter issues building a custom responsive theme, you can post your question on the community <a href="http://magento.stackexchange.com/questions/ask" target="_blank">magento.stackexchange.com</a> site and tag it with <tt>rwd-theme</tt>.</p>
<p>To browse the list of questions, see <a href="http://magento.stackexchange.com/questions/tagged/rwd-theme" target="_blank">http://magento.stackexchange.com/questions/tagged/rwd-theme</a>.</p>

</body>
</html>
